<template>
  <view class="container">
    <view class="header">
      <view class="user-info">
        <text>手机号：{{ phone }}</text>
      </view>
    </view>

    <view class="tabs">
      <view 
        v-for="(item, index) in statusList" 
        :key="index"
        :class="['tab-item', currentStatus === item.value ? 'active' : '']"
        @tap="changeStatus(item.value)"
      >
        {{ item.label }}
      </view>
    </view>

    <scroll-view scroll-y class="order-list">
      <!-- 测试数据显示 -->
      <view class="debug-info" style="padding: 20rpx; background: #f5f5f5;">
        <text>订单数量: {{ orders.length }}</text>
      </view>

      <!-- 订单列表 -->
      <view 
        v-for="(order, index) in orders" 
        :key="index" 
        class="order-card"
      >
        <view class="order-header">
          <text class="order-type">{{ order.orderType }}</text>
          <text class="order-status">{{ order.orderStatus }}</text>
        </view>

        <view class="order-body">
          <view class="title">{{ order.setmealName }}</view>
          <view class="info-item">
            <text>预约时间：{{ order.orderDate }}</text>
          </view>
          <view class="info-item">
            <text>预约人：{{ order.orderName }}</text>
          </view>
          <view class="info-item">
            <text>联系电话：{{ order.phone }}</text>
          </view>
          <view class="info-item">
            <text>支付状态：{{ order.zfStatus }}</text>
          </view>
        </view>

        <view class="order-footer">
          <text class="order-time">创建时间：{{ order.createTime }}</text>
          <view class="order-actions">
            <button 
              v-if="order.zfStatus === '已支付'" 
              class="cancel-appointment-btn" 
              @click="handleCancelAppointment(order.id)"
            >取消预约</button>
            <button 
              v-if="order.zfStatus === '未支付'" 
              class="pay-btn" 
              @click="handlePay(order)"
            >立即支付</button>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
const BASE_URL = 'http://localhost:8188'

export default {
  data() {
    return {
      statusList: [
        { label: '全部', value: '' },
        { label: '支付超时', value: '支付超时' },
        { label: '已支付', value: '已支付' },
        { label: '未支付', value: '未支付' }
      ],
      currentStatus: '',
      orders: [],
      phone: '',
      loading: false
    }
  },

  onLoad() {
    const userInfo = uni.getStorageSync('userInfo')
    if (userInfo && userInfo.phone) {
      this.phone = userInfo.phone
      this.loadOrders()
    }
  },

  methods: {
    loadOrders() {
      this.loading = true
      
      uni.request({
        url: `${BASE_URL}/api/order/myOrder`,
        method: 'GET',
        data: {
          phone: this.phone,
          zfStatus: this.currentStatus
        },
        success: (res) => {
          if (res.data.code === 200) {
            // 直接赋值，不做额外处理
            this.orders = res.data.data
            console.log('订单数据:', this.orders)
          }
        },
        complete: () => {
          this.loading = false
        }
      })
    },

    changeStatus(status) {
      this.currentStatus = status
      this.loadOrders()
    },

    handlePay(order) {
      console.log('准备支付订单:', order)
      // 确保有订单信息
      if (!order) {
        uni.showToast({
          title: '订单信息不完整',
          icon: 'none'
        })
        return
      }

      try {
        // 构造支付所需的订单信息
        const paymentInfo = {
          id: order.id,
          orderName: order.orderName,
          orderDate: order.orderDate,
          setmealName: order.setmealName,
          amount: order.amount || '0.00',
          phone: order.phone,
          orderType: order.orderType
        }

        // 跳转到支付页面
        uni.navigateTo({
          url: `/pages/order/payment?orderInfo=${encodeURIComponent(JSON.stringify(paymentInfo))}`,
          success: () => {
            console.log('跳转支付页面成功')
          },
          fail: (err) => {
            console.error('跳转支付页面失败:', err)
            uni.showToast({
              title: '跳转支付页面失败',
              icon: 'none'
            })
          }
        })
      } catch (error) {
        console.error('处理支付失败:', error)
        uni.showToast({
          title: '处理支付失败',
          icon: 'none'
        })
      }
    },

    handleCancelAppointment(orderId) {
      uni.showModal({
        title: '提示',
        content: '确定要取消预约吗？取消后将无法恢复',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '取消中...'
            })
            
            uni.request({
              url: `${BASE_URL}/api/order/CancelOrder`,
              method: 'GET',
              data: {
                id: orderId
              },
              success: (res) => {
                if (res.data.code === 200) {
                  uni.showToast({
                    title: '已取消预约',
                    icon: 'success',
                    duration: 2000
                  })
                  // 刷新订单列表
                  this.loadOrders()
                } else {
                  uni.showToast({
                    title: res.data.errorMessage || '取消失败',
                    icon: 'none',
                    duration: 2000
                  })
                }
              },
              fail: (err) => {
                console.error('取消预约失败:', err)
                uni.showToast({
                  title: '取消失败，请重试',
                  icon: 'none',
                  duration: 2000
                })
              },
              complete: () => {
                uni.hideLoading()
              }
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background: #f5f5f5;
}

.header {
  background: #1890ff;
  padding: 20rpx;
  color: #fff;
}

.tabs {
  display: flex;
  background: #fff;
  padding: 20rpx;
  
  .tab-item {
    flex: 1;
    text-align: center;
    padding: 10rpx;
    font-size: 28rpx;
    color: #666;
    
    &.active {
      color: #1890ff;
      font-weight: bold;
    }
  }
}

.order-list {
  padding: 20rpx;
}

.order-card {
  background: #fff;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  padding: 20rpx;
  
  .order-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #eee;
    
    .order-type {
      color: #1890ff;
    }
    
    .order-status {
      color: #666;
    }
  }
  
  .order-body {
    padding: 20rpx 0;
    
    .title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
    }
    
    .info-item {
      font-size: 28rpx;
      color: #666;
      margin-bottom: 10rpx;
    }
  }
  
  .order-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20rpx;
    padding-top: 20rpx;
    border-top: 1rpx solid #eee;

    .order-time {
      font-size: 24rpx;
      color: #999;
    }

    .order-actions {
      display: flex;
      gap: 20rpx;

      .cancel-appointment-btn {
        font-size: 24rpx;
        padding: 10rpx 30rpx;
        background: #ff4d4f;
        color: #fff;
        border-radius: 30rpx;
        border: none;

        &:active {
          opacity: 0.8;
        }
      }

      .pay-btn {
        font-size: 24rpx;
        padding: 10rpx 30rpx;
        background: #409eff;
        color: #fff;
        border-radius: 30rpx;
        border: none;

        &:active {
          opacity: 0.8;
        }
      }
    }
  }
}
</style> 